<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div class="nav">
            首页 / {{news.zixunlaiyuan}} / {{news.newsname}}
          </div>
          
          <div class="content">
            <div class="text-2xl text-center text-[#000000] mb-3" style="font-size: 24px;font-weight: 500;color: #000000;letter-spacing: 1px;">{{news.newsname}}</div>
          
            <div class="text-sm mb-3"><span class="text-sm text-[#9C9C9C]">关键词：</span>{{news.guanjianci}}</div>
            <div class="text-sm mb-3"><span class="text-sm text-[#9C9C9C]">资讯来源：</span>{{news.zixunlaiyuan}}</div>
            <div class="text-sm mb-3"><span class="text-sm text-[#9C9C9C]">发布时间：</span>{{news.createTime.split(' ')[0]}}</div>
            <div v-html="changeRich(news.content)"></div>
          </div>
          <div class="foot">
            <img class="footpicture" :src="ad.pictureurl" @click="windowOpen(ad.linkurl)" style="cursor: pointer;" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchNews } from '@/api/news'
import NavBar from "@/components/NavBar.vue"
import { fetchAd } from '@/api/ad'

export default {
  name: 'NewsDetailView',
  components: {
    NavBar
  },
  data() {
    return {
      news: {},
      ad: {}
    }
  },
  created() {
    console.info(this.$route.params)
    fetchNews(this.$route.params.id).then(response => {
      this.news = response.data
    })
    this.getAd()
  },
  methods: {
    getAd() {
      console.info(1)
      fetchAd('news_detail_1').then(response => {
        this.ad = response.data
      })
    },
    windowOpen(url) {
      window.open(url)
    },
    changeRich(str) {
      if (!str) {
        return '';
      }
      str = str.replace(/<img /g, '<img style="display: -webkit-inline-box;" ')
      let newStr = str.replace(/<(img).*?(\/>|<\/img>)/g, function(mats) {
        if (mats.indexOf('style') < 0) {
          return mats.replace(/<\s*img/, '<img style="max-width:100%;height:auto;"');
        } else {
          return mats.replace(/style=("|')/, 'style=$1max-width:100%;height:auto;');
        }
      });
      return newStr
    },
  }
}
</script>

<style lang="scss" scoped>
.contain {
  display: flex;
  justify-content: space-between;
}

.main {
  width: 56.25rem;
  margin-bottom: 1.25rem;
}

.main .nav {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #A4A8AF;
  margin-top: 0.8125rem;
}

.main .content {
  margin-top: 0.8125rem;
  background: #FFFFFF;
  padding: 2.125rem;
}

.main .foot .footpicture {
  margin-top: 1.75rem;
  width: 56.25rem;
  height: 3.3125rem;
  display: block;
}
</style>